<template>
    <div class="body">
      <el-select v-model="student.city" filterable placeholder="折线图" style="margin-left: 5px;">
        <el-option v-for="item in citys" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="student.major" filterable placeholder="请选择专业" style="margin-left: 5px;">
        <el-option v-for="item in majors" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="student.enrollmentYear" filterable placeholder="请选择年份" style="margin-left: 5px;">
        <el-option v-for="item in years" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" style="margin-left: 5px;" @click="loadPost1()">查询</el-button>
      <div class="box" id="container1">
      </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
// 引入axios
import axios from 'axios'
export default {
    name: 'Echarts1',
    components: {
    },
    data() {
        return {
            student: {
                name: '',
                city: '',
                major: '',
                enrollmentYear: ''
            },
            citys: [
                {
                    value: '北京',
                    label: '北京'
                }, {
                    value: '上海',
                    label: '上海'
                }, {
                    value: '广州',
                    label: '广州'
                }, {
                    value: '深圳',
                    label: '深圳'
                },
            ],
            majors: [
                {
                    value: '计算机科学',
                    label: '计算机科学'
                }, {
                    value: '物理学',
                    label: '物理学'
                }, {
                    value: '英语文学',
                    label: '英语文学'
                }, {
                    value: '化学工程',
                    label: '化学工程'
                }, {
                    value: '经济学',
                    label: '经济学'
                },

            ],
            years: [
                {
                    value: 2023,
                    label: 2023
                }, {
                    value: 2022,
                    label: 2022
                }, {
                    value: 2021,
                    label: 2021
                }, {
                    value: 2020,
                    label: 2020
                },
            ]
        }
    },
    methods: {
      loadPost1() {
         axios.post('http://127.0.0.1:9090/students/echart1', this.student).then(res => res.data).then(res => {
           console.log("-----------------------",res)
          this.drawChart1(res)
        })
      },
      drawChart1(data) {
        console.log(data)
        //折线图
        var chartDom = document.getElementById('container1');
        // 判断是否已经初始化
        if (echarts.getInstanceByDom(chartDom)) {
          // 已初始化，销毁实例
          echarts.getInstanceByDom(chartDom).dispose();
        }
        var myChart = echarts.init(chartDom);
        var option = {
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              console.log("---------params------------",params)
              return "姓名: "  + params[0].name + '<br/>' + "成绩: " + params[0].value;
            }
          },
          xAxis: {
            type: 'category',
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            data: data.name
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              // data: [150, 230, 224, 218, 135, 147, 260],
              data: data.data,
              type: 'line'
            }
          ]
        };
        myChart.setOption(option);
      },
    }

}
</script>

<style>
.body {
    height: 100vh;
    /* 弹性盒子模型 */
    justify-content: center;
    align-items: center;

}

.box {
    width: 100%;
    height: 600px;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
</style>
